<template>
  <div>
    <header class="articleheader d-flex jc-center ai-center ">
      <div class="headerbackground"></div>
      <div class="articletitle d-flex jc-center ai-center">
        <h1 class="text-white">vue-transition 动画效果（fade, top, bottom, left, right）</h1>
      </div>
    </header>
    <main class="articlecontent content contentbox">
      <h2 class="decorate title  d-flex ai-center  w-100  text-1">vue-transition 动画效果（fade, top, bottom, left, right）</h2>
        <div class="d-flex jc-between">
            <span class="text fs-sl">最后更新时间:2020-11-20</span>
            <span class="text fs-sl">浏览量:53</span>
        </div>
    </main>
  </div>
</template>

<script>
export default {
  components: {},
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/var';

.articleheader {
  height: 31.25rem;
  position: relative;
  overflow: hidden;

  .navwrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    z-index: 5;
  }
  .articletitle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 5rem;
    margin: auto;
    z-index: 5;
  }
  .headerbackground {
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(../assets/images/1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 1s;
  }
  .headerbackground:hover {
    transform: scale(1.07);
  }
  .headerbackground::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
  }
}

.articlecontent {
  .title {
    height: 5rem;
    border-bottom: 1px solid #efefef;
  }
  .text{
      color: map_get($colors, 'lightgrey');
  }
}
</style>